<template>
  <div>
    <h2>信息页</h2>
    姓名:{{ name }} 原始数量:{{ count }} 计算后数量:{{ doubleCount }}

    <div>
      <el-button type="primary" @click="countAdd()">增加</el-button>
      <el-button type="warning" @click="state_fn()">组件中修改state</el-button>
      <el-button type="info" @click="pach()">dispach</el-button>

      <el-button type="danger" @click="resetval()">重置状态</el-button>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
// 为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { name, count, doubleCount } = storeToRefs(store)

const countAdd = function () {
  store.increment()
}

const pach = function () {
  store.$patch({
    name: 'Abalam',
    count: store.count - 1,
  })
}

const state_fn = function () {
  // 通过将其 $state 属性设置为新对象来替换 Store 的整个状态
  store.$state = { name: 'Paimon', count: 666 }
}

const resetval = function () {
  // 调用store里重置状态方法
  store.reset()
}
</script>
<style scoped></style>
